<template>
	<view class="bigbox">
		<!-- 顶部button按钮 -->
		<div class="buttonbox">
			<ul>
				<li v-for="(item,index) in alllist">
					<button class="oncebutton" size="mini" plain :class="nodbutton == index ? 'sort1' : 'sort2'"
						@click="clickbutton(index)">{{item.name}}</button>
				</li>
			</ul>
		</div>
		<!-- 轮播图 -->

		<swiper class="swiper" circular :current=nodbutton previous-margin='75rpx' next-margin='75rpx'>
			<swiper-item v-for="(item,index) in alllist" class="onceitem">
				<img :src=item.img alt="">
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getnavgation
	} from "../../api/index.js"
	export default {
		data() {
			return {
				alllist: [],
				nodbutton: '0'
			}
		},
		methods: {
			clickbutton(val) {
				this.nodbutton = val
			}
		},
		created() {
			getnavgation().then(res => {
				this.alllist = res.data
				console.log(this.alllist)
			})
		}
	}
</script>

<style scoped lang="scss">
	.buttonbox {
		width: 750rpx;
		height: 100rpx;
		overflow-x: scroll;
		line-height: 140rpx;

		ul {
			padding: 0;
			list-style: none;
			display: -webkit-box;
			-webkit-overflow-scrolling: touch;
			-ms-overflow-style: none;
			overflow: -moz-scrollbars-none;

			.oncebutton {
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin-left: 20rpx;
				border: 1px solid black;
				border-radius: 70rpx;
			}

			.sort1 {
				background-color: rgb(254, 214, 82);
				border: none;
				font-weight: bold;

			}
		}
	}

	.swiper {
		width: 600rpx;
		height: 800rpx;

		.onceitem {
			width: 600rpx;
			height: 800rpx;
			background-color: red;
			border-radius: 40rpx;

			img {
				width: 100%;
				height: auto;
			}
		}
	}
</style>